<template>
    <div>
        <h3>详情页面</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td >
                        {{querinfo.ShopName}}
                    </td>
                </tr>

                <tr>
                    <td align="right">分店名称</td>
                    <td>
                        {{querinfo.BranchName}}
                    </td>
                </tr>

                <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <img :src="querinfo.Photo" width="100" height="100">
                       
                    </td>
                </tr>

                <tr>
                    <td align="right">开业时间</td>
                    <td>
                        {{querinfo.BeginTime}}
                    </td>
                </tr>

                <tr>
                    <td align="right">是否启用</td>
                    <td>
                        {{querinfo.State==1?"启用":"禁用"}}
                    </td>
                </tr>

                <tr>
                    <td align="right">门店特色</td>
                    <td>
                       {{querinfo.Feature}}
                    </td>
                </tr>

                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                       {{querinfo.Desc}}
                    </td>
                </tr>

                <tr>
                    <td align="right">门店位置</td>
                    <td>
                        {{querinfo.AddressId}}
                    </td>
                </tr>


                <tr>
                    <td align="right">酒店类型</td>
                    <td>
                        <span v-if="querinfo.ShopType == 1">普通酒店</span>
                        <span v-if="querinfo.ShopType == 2">三星酒店</span>
                        <span v-if="querinfo.ShopType == 3">五星酒店</span>
                        <span v-if="querinfo.ShopType == 4">电竞酒店</span>
                        <span v-if="querinfo.ShopType == 5">商务酒店</span>
                        <span v-if="querinfo.ShopType == 6">民宿酒店</span>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</template>


<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
const route = useRoute();
const router = useRouter();

onMounted(() => {
    GetShopAddress();
})

//数据----------------------------
//数据----------------------------
//数据----------------------------
const dataaddress: any = reactive({
    list: []
})
//图片上传
const img = (e: any) => {
    //e：事件对象
    //将上传的文件转为formData格式
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    //发送网络请求完成图片上传
    axios({
        method: "post",
        url: "/api/Imgs/UpdateImg",
        data: f
    })
        .then(res => {
            if(res.data=="不是图片"){
                alert('不是图片');
                return;
            }
            if(res.data=="大于2M"){
                alert('大于2M');
            }
            console.log(res);
            querinfo.Photo = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}
//增加门店的时候向后端传递的数据
const querinfo: any = reactive({
    "Id": route.query.id,
    "ShopName": "",
    "BranchName": "",
    "Photo": "",
    "BeginTime": "",
    "State": "",
    "Feature": [],
    "Desc": "",
    "AddressId": "",
    "ShopType": "",
})

onMounted(()=>{
    detailshop();
})

let addresname=ref('')
//函数----------------------------
//函数----------------------------
//函数----------------------------
const detailshop=()=>{
    axios({
        method:"get",
        url:"/api/Shops/GetShopModel",
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(querinfo,res.data)
        // querinfo.ShopName=res.data.ShopName
        // querinfo.BranchName=res.data.BranchName
        // querinfo.Photo=res.data.Photo
        querinfo.BeginTime=res.data.BeginTime.substring(0,10)
        // querinfo.State=res.data.State
        querinfo.Feature=res.data.Feature
        // querinfo.Desc=res.data.Desc
        // querinfo.AddressId=res.data.AddressId
        // querinfo.ShopType=res.data.ShopType
    })
    .catch(err=>{
        console.log(err);
    })
}




//修改
const ok = () => {
    querinfo.Feature = querinfo.Feature.toString();
    if (querinfo.ShopName == "") {
        alert('门店名称不能为空');
        return;
    }
    let reg = /^[\u4e00-\u9fa5]{1,20}$/;
    if (reg.test(querinfo.ShopName) == false) {
        alert('门店名称只能是1-20个汉字')
        return;
    }
    if (querinfo.BranchName == "") {
        alert('分店名称不能为空');
        return;
    }
    if (querinfo.Photo == "") {
        alert('门店图片不能为空');
        return;
    }
    if (querinfo.BeginTime == "") {
        alert('开业时间不能为空');
        return;
    }
    if (querinfo.State == "") {
        alert('门店状态不能为空');
        return;
    }
    if (querinfo.Feature.length == 0) {
        alert('门店特色必选');
        return;
    }
    if (querinfo.Desc == "") {
        alert('门店介绍不能为空');
        return;
    }

    if (querinfo.Desc.length > 20) {
        alert('门店介绍只能小于20字符');
        return;
    }
    if (querinfo.AddressId == "") {
        alert('门店地址必选');
        return;
    }
    if (querinfo.ShopType == "") {
        alert('门店类型必选');
        return;
    }

    axios({
        method: "put",
        url: "/api/Shops/UpdShopModel",
        data: querinfo
    })
        .then(res => {
            console.log(res);
            if (res.data == -1) {
                alert('门店名称重复');

            }
            else if (res.data > 0) {
                alert('修改成功');
                router.push('/shoplist')
            }
            else {
                alert('修改失败');
            }
        })
        .catch(err => {
            console.log(err);
        })
}



//显示
const GetShopAddress = () => {
    axios({
        method: "get",
        url: "/api/Shops/GetShopAddressList"
    })
        .then(res => {
            console.log(res);
            dataaddress.list = res.data
        })
        .catch(err => {
            console.log(err);
        })
}



</script>











<style scoped></style>